import React, { render } from './react'
import Component from './react/component'

const root = document.getElementById('root')

const jsx = (
  <div>
    <p>Hello Fiber</p>
    <p>Hi ff</p>
  </div>
)

const jsx2 = (
  <div>
    {/* <div>Hi nihao</div> */}
    <p>Hi ff</p>
  </div>
)

render(jsx, root)

setTimeout(() => {
  render(jsx2, root)
}, 2000)

class Hello extends Component {
  constructor(props) {
    super(props)
  }
  render () {
    return (
      <div>
        I am class Component
        <h3>{this.props.title}</h3>
      </div>
    )
  }
}

// render(<Hello title="title"/>, root)

function Hi (props) {
  return (
    <div>
      Hi
      <h3>{props.title}</h3>
    </div>
  )
}

// render(<Hi title="title" />, root)